import React,{Component} from 'react';
import {connect} from 'react-redux';
import styles from './edit.scss';
import classNames from 'classnames/bind';
import {Layout} from 'antd';
import htmlToDraft from 'html-to-draftjs';
import { convertToRaw, ContentState } from 'draft-js';
import {Sider,EditHeader,EditForm,Loading} from '../components';
import {moduleName_CN,EDIT_SIDER} from '../util';
import axios from 'axios';
import {API_ADDRESS} from '../util/address';




let cx = classNames.bind(styles);
const {Content}=Layout;

class Edit extends Component
{
     constructor(props)
    {
        super(props)
        this.state={
          isLoading:true,
          sider:EDIT_SIDER,
          contentid:undefined,
          contentState:'',
          title:'新的文章',
          moduleName:'',
          hasForm:true
        }
        this.getDocument=this.getDocument.bind(this)
    }
    async getDocument(props)
    {
      const contentid=props.match.params.id;
      this.setState({isLoading:true})
      //获取文章内容
      if(contentid)
      {
        const {data}=await axios.get(`${API_ADDRESS}/getDoc?contentid=${contentid}&modulename=employee`);
        if(data.get){
          console.log(data.get)
          this.setState({sider:props.sider,isLoading:false,hasForm:false})
        }
        else{
          const contentBlock=htmlToDraft(data.content)
          const content = ContentState.createFromBlockArray(contentBlock.contentBlocks);
          this.setState({sider:props.sider,isLoading:false,contentState:convertToRaw(content),title:data.title,contentid:data.contentid,moduleName:data.module_name,hasForm:true})
        }
      }
      else{
        this.setState({sider:props.sider,isLoading:false})
      }
    }
    componentWillMount()
    {
      let username=sessionStorage.getItem('username')
      if(!username)
      {
        location.replace('/login')
      }
      this.getDocument(this.props);
    }
    componentWillReceiveProps(nextProps)
    {
     this.getDocument(nextProps);
    }

    render()
    {
      //把sider数据存入state
        return(
        <Layout>
          <EditHeader/>
          <Content style={{marginTop:'2px' }}>
          <Layout style={{ padding: '24px 0', background: '#fff' }}>
            <Sider go={this.props.history.push} data={this.state.sider}/>
          <Content style={{ padding: '0 24px', minHeight: 280 }}>
            <div className={cx('edit')}>
              {this.state.isLoading?<Loading />
              :(this.state.hasForm ?(<EditForm
                  contentid={this.state.contentid}
                  contentState={this.state.contentState}
                  title={this.state.title}
                  moduleName={this.state.moduleName}
              />)
              :'请新建文档')
              }
            </div>
          </Content>
          </Layout>
          </Content>
      </Layout>
       )
    }
};

export default connect(
  state=>{
    const data=state.data
    let postedmenu=[];
    let nopostedmenu=[];
    data.map((item,index)=>{
       let a=[];
       let b=[];
       item.pages.map((i)=>{
            if(i.posted)
            {
              a.push(i)
            }
            else{
              b.push(i);
            }
       })
      postedmenu.push({menuTitle:moduleName_CN[item.modulename],titleArray:a})
      nopostedmenu.push({menuTitle:moduleName_CN[item.modulename],titleArray:b})
    })
    let siderdata={sider:[{tabTitle:'已发布',menu:postedmenu},{tabTitle:'草稿箱',menu:nopostedmenu}]};
    return siderdata
  },
)(Edit)
